<template>
	<view>
		<u-sticky bgColor="#fff" v-if="false">
			<u-row justify="space-between" gutter="10" customStyle="margin:10rpx 20rpx"  >
				<u-col span="6">
					<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
						<view class="sh" v-for="(item,index) in navtab2">
							<view @click="cktab2(item.id)" class="tab" :class="inck2==item.id ?'tabck':''">
								{{item.modelName}}
							</view>
						</view>
					</scroll-view>

				</u-col>

				<u-col span="4">
					<view class="tr">积分:{{userData.integral||0}}</view>
				</u-col>
				<u-col span="2" >
					<navigator url="/pages/mine/integralBuy">
						<u-button type="primary" color="linear-gradient(to right, rgb(91, 91, 91), rgb(16, 16, 16))"
							size="small" circle='true' text="获取积分"></u-button>
					</navigator>
				</u-col>
			</u-row>
			<u-row>
				<u-col span="4"  v-if="inck2 == 0" v-for="(item,index) in navtab">
					<view @click="cktab(item.id)" class="tab" :class="inck==item.id ?'tabck':''">
						{{item.name}}
					</view>
				</u-col>
			</u-row>
		</u-sticky>
		<view class="shopBox">
			<view class="shopItem" v-for="(item,index) in goodsList" :key="index" @click="ckimg(item.videoUrl,2)">
				<image mode="aspectFill" :src="item.picUrl"></image>
				<view class="goods_name">
					<u--text :lines="1" :text="item.name"></u--text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				ckitem: 0,
				userData: [],
				pageNo: 1,
				cartID: 1,
				goodsList: [],
				inck: 0,
				inck2: 0,
				navtab: [{
					id: 0,
					name: '全部',
				}, {
					id: 1,
					name: '已兑换',
				}, {
					id: 2,
					name: '未兑换'
				}],
				navtab2: [{
					id: 0,
					modelName: '幻体空间',
				}
				// ,
				// {
				// 	id: 1,
				// 	modelName: '影像兑换卡',
				// },
				],
			}
		},
		onShow() {
			if (!uni.getStorageSync('accessToken')) {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			} else {
				this.API_Shop();
				this.API_user();
			}
		},
		onReachBottom() {
			this.API_Shop();
		},
		methods: { 
			
			ckimg(url, type) {
				uni.navigateTo({
					url: '/pages/mine/viedo?type=' + type + '&srcs=' + url
				})
			},
			cktab(id) {
				this.inck = id;
				this.pageNo = 1;
				this.goodsList = [];
				this.API_Shop();
			},
			cktab2(id) {
				this.inck2 = id 
				this.pageNo = 1;
				this.goodsList = [];
				this.API_Shop();
			},
			API_Shop() {
				var that = this;
				var pageNo = that.pageNo;
				var param = {
					"pageNo":pageNo,
					"pageSize":10,
					"brandId":1
				} 
				
				var brandId = 1
				if(this.inck2 == 0){
					param.buystate = 0 
					brandId = 1
					
					if (that.inck == 0) {
						param.buystate = -1
					} else if (that.inck == 1) { 
						param.buystate = 1 
					} else { 
						param.buystate = 0 
					}
				}else{
					param.buystate = 0 
					brandId = 2
				}
				
				
				var url = '/app-api/product/spu/page-buy?pageNo='+pageNo+"&pageSize=10&brandId="+brandId+"&buyState="+ param.buystate
				that.ran
					.request(url, {}, 'GET')
					.then(res => {
						console.log(res);
						if (res.code == 200) {
							 
							that.goodsList = that.goodsList.concat(res.data.list);
							that.pageNo = that.pageNo + 1;
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
			},
			API_user() {
				var that = this;
				that.ran
					.request('/app-api/member/user/get', {}, 'GET')
					.then(res => {
						console.log(res);
						if (res.code == 200) {
							that.userData = res.data;
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
			}
		}
	}
</script>

<style lang="scss">
	.tr {
		text-align: right;
		font-size: 26rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;

		.sh {
			display: inline-block;
			padding-right: 20rpx;
		}
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.shopBox {
		overflow: hidden;
		margin-left: 20rpx;

		.shopItem {
			width: 345rpx;
			margin: 20rpx 20rpx 20rpx 0;
			float: left;

			image {
				width: 345rpx;
				height: 345rpx;
				display: block;
				border-radius: 12rpx;
			}

			.goods_name {
				padding: 0 10rpx;
			}
		}
	}

	.tab {
		text-align: center;
		line-height: 80rpx;
		border-bottom: 1rpx solid #eee;
	}

	.tabck {
		color: #302C29;
		font-weight: bold;
		// border-bottom: 4rpx solid #302C29 !important;
		position: relative;
	}

	.tabck::after {
		content: ''; // 必须
		position: absolute;
		left: -50rpx;
		margin-left: 50%;
		bottom: 0;
		right: 0;
		width: 100rpx;
		height: 4px;
		border-radius: 10rpx;
		background-color: #302C29;
	}
</style>